import React, {useRef, useState} from 'react';
import {Avatar, Button, Card, Checkbox, Divider, Form, Input, message, Modal, Space} from "antd";
import {useDispatch, useSelector} from "react-redux";
import {
    IdcardOutlined,
    TrademarkCircleOutlined,
    CrownOutlined
} from '@ant-design/icons';
import {reqUpdatePassword, reqUpdatePhoneOrName} from "../../../../api/backStage/role";
import {updateAdminInfo} from "../../../../store/backStage/adminLoginSlice";


const tabListNoTitle = [
    {
        key: 'admin',
        tab: '账号操作',
    },
];

const AdminCenter = () => {

    const dispatch = useDispatch()
    const [form] = Form.useForm()

    const [editPassword, setEditPassword] = useState(false)
    const {adminAllInfo} = useSelector((state) => state.persistedReducer.adminLogin)
    const [activeTabKey1, setActiveTabKey1] = useState('admin');

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [editPhone, setEditPhone] = useState(false);
    const [editName, setEditName] = useState(false);


    const updatePwd = async (values) => {
        setEditPassword(true)
        const result = await reqUpdatePassword({admin_id: adminAllInfo.id, fd: values})
        if (result.status === 0) {
            message.success('修改成功！')
            dispatch(updateAdminInfo(result.data))
            setEditPassword(false)
            form.resetFields()
        }else if (values.originalPassword === values.newPassword) {
            message.error('修改失败，新密码不能与旧密码相同！')
        } else if (values.confirmPassword !== values.newPassword) {
            message.error('修改失败，二次密码输入错误！')
        }
    };

    //修改手机号
    const updatePhone = () => {
        setEditName(false)
        setEditPhone(true)
        setIsModalOpen(true);
    }

    const updateName = () => {
        setEditPhone(false)
        setEditName(true)
        setIsModalOpen(true);
    };

    //修改手机号或姓名
    const updatePhoneOrNameOk = async (values) => {
        setIsModalOpen(false);
        const result = await reqUpdatePhoneOrName({admin_id: adminAllInfo.id, fd: values})
        if (result.status === 0) {
            message.success('修改成功！')
            dispatch(updateAdminInfo(result.data))
        } else {
            message.error('修改失败！')
        }
    };
    const nameAndPhoneRef = useRef()
    const updatePhoneOrNameCancel = () => {
        nameAndPhoneRef.current.resetFields()
        setIsModalOpen(false);
    };


    //标签页内容
    const contentListNoTitle = {
        admin: <div>
            {
                editPassword ?
                    <Form
                        form={form}
                        labelCol={{span: 8}}
                        wrapperCol={{span: 16}}
                        style={{maxWidth: 600}}
                        initialValues={{remember: true}}
                        onFinish={updatePwd}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="原密码"
                            name="originalPassword"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入原密码!',
                                },
                            ]}
                        >
                            <Input.Password minLength={6} maxLength={15}/>
                        </Form.Item>

                        <Form.Item
                            label="新密码"
                            name="newPassword"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入新密码!',
                                },
                            ]}
                        >
                            <Input.Password minLength={6} maxLength={15}/>
                        </Form.Item>

                        <Form.Item
                            label="确认密码"
                            name="confirmPassword"
                            rules={[
                                {
                                    required: true,
                                    message: '请确认新密码!',
                                },
                            ]}
                        >
                            <Input.Password minLength={6} maxLength={15}/>
                        </Form.Item>


                        <Form.Item
                            wrapperCol={{
                                offset: 12,
                                span: 16,
                            }}
                        >
                            <Space>
                                <Button onClick={() => {
                                    form.resetFields()
                                    setEditPassword(false)
                                }}>取消</Button>
                                <Button>重置</Button>
                                <Button type="primary" htmlType="submit">
                                    修改密码
                                </Button>
                            </Space>
                        </Form.Item>
                    </Form> :
                    <div>
                        <div>
                            <span style={{fontSize: 20}}> 手机号修改  </span>
                            <div style={{display: 'flex', justifyContent: 'space-between'}}>
                                <span style={{color: '#a9a9a9', fontSize: 16}}>已绑定手机：{adminAllInfo.phone}</span>
                                <Button style={{fontSize: 18}} onClick={() => updatePhone()}
                                        type="link">修改手机号</Button>
                            </div>
                        </div>
                        <Divider></Divider>
                        <div>
                            <span style={{fontSize: 20}}>姓名修改</span>
                            <div style={{display: 'flex', justifyContent: 'space-between'}}>
                                <span style={{color: '#a9a9a9', fontSize: 16}}>所使用姓名：{adminAllInfo.name}</span>
                                <Button style={{fontSize: 18}} type="link"
                                        onClick={() => updateName()}>修改姓名</Button>
                            </div>
                        </div>
                        <Divider></Divider>
                        <div>
                            <span style={{fontSize: 20}}>密码修改</span>
                            <div style={{display: 'flex', justifyContent: 'space-between'}}>
                                <span style={{color: '#a9a9a9', fontSize: 16}}>修改个人密码</span>
                                <Button onClick={() => updatePwd()} style={{fontSize: 18}} type="link">修改密码</Button>
                            </div>
                        </div>
                    </div>
            }
        </div>
    };


    return (
        <div style={{display: 'flex'}}>
            <Card style={{
                display: 'flex',
                alignItems: 'start',
                justifyContent: 'center',
                width: 400,
                height: 750,
                marginRight: 30
            }}>
                <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
                    <Avatar size={200} src={adminAllInfo.avatar}>
                    </Avatar>
                    <span style={{fontSize: 18, color: 'rgba(0,0,0,.5)'}}>{adminAllInfo.signature}</span>
                </div>
                <Divider></Divider>
                <div style={{
                    display: 'flex',
                    alignItems: 'flex-start',
                    flexDirection: 'column',
                    justifyContent: 'space-evenly',
                    height: '200px'
                }}>
                    <span style={{fontSize: 18}}>
                        <IdcardOutlined style={{marginRight: 10}}/>姓名：{adminAllInfo.name}</span>
                    <span style={{fontSize: 18}}>
                        <TrademarkCircleOutlined style={{marginRight: 10}}/>权限：{adminAllInfo.role}</span>
                    <span style={{fontSize: 18}}>
                        <CrownOutlined style={{marginRight: 10}}/>职位：{adminAllInfo.job}</span>
                </div>
            </Card>
            <Card tabList={tabListNoTitle} activeTabKey={activeTabKey1} style={{width: '77%', height: 600}}>
                {contentListNoTitle[activeTabKey1]}
            </Card>
            <Modal
                title={editPhone ? "修改手机号" : "修改姓名"}
                open={isModalOpen}
                footer={null}
                onCancel={updatePhoneOrNameCancel}>
                <Form
                    name="basic"
                    labelCol={{span: 6,}}
                    wrapperCol={{span: 16,}}
                    style={{maxWidth: 600, marginTop: 30}}
                    initialValues={{remember: true,}}
                    onFinish={updatePhoneOrNameOk}
                    autoComplete="off"
                    ref={nameAndPhoneRef}
                >
                    <Form.Item
                        label={editPhone ? "原手机号" : "原姓名"}
                        name={editPhone ? "phone" : "name"}
                        rules={[
                            {
                                required: true,
                                message: editPhone ? "请输入原手机号！" : "请输入原姓名",
                            },
                        ]}
                    >
                        <Input minLength={editPhone ? 11 : null} maxLength={editPhone ? 11 : null}/>
                    </Form.Item>

                    <Form.Item
                        label={editName ? "姓名" : "手机号"}
                        name={editName ? "updateName" : "updatePhone"}
                        rules={[
                            {
                                required: true,
                                message: editName ? "请输入要修改的姓名！" : "请输入要修改的手机号",
                            },
                        ]}
                    >
                        <Input minLength={editPhone ? 11 : null} maxLength={editPhone ? 11 : null}/>
                    </Form.Item>


                    <Form.Item
                        wrapperCol={{
                            offset: 18,
                            span: 16,
                        }}
                    >
                        <Button type="primary" htmlType="submit">
                            确认修改
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
};

export default AdminCenter;